<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gnatoo</title>

<link href="style.css" rel="stylesheet" type="text/css" />
	
<link href="jslibraries/jquery/css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

<link href="css/examples/tables/bluetablesorter/style.css"
	rel="stylesheet" type="text/css" />
<link href="css/examples/tabs/simple.css" rel="stylesheet" type="text/css" />
<link href="css/examples/trees/simple.css"
	rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jslibraries/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.layout.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.simplemodal-1.4.1.js"></script>

<script type="text/javascript" src="gnatoo/gnatoo.js"></script>

<script type="text/javascript" src="jslibraries/data/BaseListDataProvider.js"></script>
<script type="text/javascript" src="jslibraries/data/TreeDataProvider.js"></script>

</head>

<body>
<form>

<script id="Paging_model" type="text/javascript">
var productsTable = {	
		products : [ {	id : '1',price : 1000.00}, 
		             {	id : '2',price : 2000.00},
		             {	id : '3',price : 3000.00},
		             {	id : '4',price : 4000.00},
		             {	id : '5',price : 5000.00},
		             {	id : '6',price : 6000.00},
		             {	id : '7',price : 7000.00},
		             {	id : '8',price : 8000.00},
		             {	id : '9',price : 9000.00},
		             {	id : '10',price : 10000.00},
		             {	id : '11',price : 11000.00},
		             {	id : '12',price : 12000.00},
		             {	id : '13',price : 13000.00},
		             {	id : '14',price : 14000.00},
		             {	id : '15',price : 15000.00},
		             {	id : '16',price : 16000.00},
		             ],

		pageSize : 5,
		currentStartIndex : 0,
		home : function() {
			this.currentStartIndex = 0;
		},
		
		end : function() {
			this.currentStartIndex = this.products.length - this.pageSize;
		},
		
		next : function() {
			if (this.currentStartIndex + this.pageSize < this.products.length) {
				this.currentStartIndex += this.pageSize;
			}
		},
		
		prev : function() {
			if (this.currentStartIndex - this.pageSize >= 0) {
				this.currentStartIndex -= this.pageSize;
			}
		}
	};

</script>

<div id="Paging" >
<script type="text/html">
<div>
  <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" >
	<thead>
    <tr>
		<th>id</th>
		<th>price</th>
	</tr>
	</thead>
	<tbody>
	<loop value="#{.productsTable.products}" var="row" start="#{.productsTable.currentStartIndex}" pageSize="#{.productsTable.pageSize}">
		<tr>
			<td style="width: 100px">#{.row.id}</td>
			<td style="width: 100px">#{.row.price}</td>
		</tr>
	</loop>
	</tbody>
  </table>
	<button type="button" onclick="#{.productsTable.prev()}">prev</button>
	<span style="padding-left: 10px"> </span>
	<button type="button" onclick="#{.productsTable.next()}"> next</button>
</div>
</script>
</div>
<script>
	$(document).ready( function() { 
		// init context
		var gnatooContext = window.gnatoo.initByName('Paging'); 

		// bind model
		gnatooContext.data['productsTable'] = productsTable;

		// render
		gnatooContext.render();
	});
</script>


<!-- <jsp:include page="tutorials/Tables/Treetable/Treetable.html"
	flush="false"></jsp:include>
 -->

</form>
<pre id="mylog" style="font-size: 1.0em; display : block"></pre>
</body>
</html>


